<div class="default-background">
    <div style="display: flex; justify-content: space-between; margin-top: 16px;">
        <div>
            <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;">
                {{'MY_ROLE_DASHBOARD'|translate}}
            </div>
            <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'CREATE_ROLE_SUB'|translate}}
            </div>
        </div>
        <div>
            <button mat-raised-button color="primary" *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'ROLE_MGMT')) |async "
                (click)="createNewRole()">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <mat-icon>add</mat-icon>
                    <div>{{'ADD_ROLE'|translate}}</div>
                </div>
            </button>
        </div>
    </div>
    <ng-container *ngIf="permissionHelper.extractResult(permissionHelper.canDo(projectId, httpSvc.currentUserAuthInfo.permissionIds,'ROLE_MGMT')) |async ">
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">
                <ng-container matColumnDef="description">
                    <th mat-header-cell *matHeaderCellDef>
                        {{columnList['description']|translate}}
                    </th>
                    <td mat-cell *matCellDef="let row">
                        {{row.description}}
                    </td>
                </ng-container>

                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>
                        {{columnList['name']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <ng-container *ngIf="row.systemCreate">
                            {{row.name |translate}}
                        </ng-container>
                        <app-editable-field *ngIf="row.roleType==='USER' && !row.systemCreate" [inputValue]="row.name"
                            [readOnly]="true">
                        </app-editable-field>
                        <div *ngIf="row.roleType!=='USER' && !row.systemCreate">
                            {{row.name}}
                        </div>
                    </td>
                </ng-container>
                <ng-container matColumnDef="edit">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">
                        {{columnList['edit']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon *ngIf="editable(row)" (click)="editRole(row.id)" [color]="'primary'">edit
                        </mat-icon>
                        <mat-icon *ngIf="!editable(row)" aria-disabled [color]="'warn'">block</mat-icon>
                    </td>
                </ng-container>
                <ng-container matColumnDef="delete">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">
                        {{columnList['delete']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon *ngIf="editable(row)" (click)="doDelete(row.id)" [color]="'warn'">
                            delete_outline</mat-icon>
                        <mat-icon *ngIf="!editable(row)" aria-disabled [color]="'warn'">block</mat-icon>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>

        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount" [pageIndex]="tableSource.pageNum"
        [pageSize]="tableSource.pageSize" (page)="tableSource.loadPage($event.pageIndex)">
    </mat-paginator>
    </ng-container>
</div>